{% extends "pages-base.html" %}
{% block css %}
<link href="/static/css/select2.min.css" type="text/css" rel="stylesheet"/>
{% endblock %}

{% block content %}
<div class="panel">
    <!--Default Tabs (Left Aligned)-->
    <!--===================================================-->
    <div class="tab-base">

        <!--Nav Tabs-->
        <ul class="nav nav-tabs">
            <li class="active">
                <a data-toggle="tab" href="#deploy-install-tab-1">任务管理</a>
            </li>
            <li>
                <a data-toggle="tab" href="#deploy-install-tab-2">任务编排</a>
            </li>
            <li>
                <a data-toggle="tab" href="#deploy-install-tab-3">组件管理</a>
            </li>
        </ul>

        <!--Tabs Content-->
        <div class="tab-content">
            <div id="deploy-install-tab-1" class="tab-pane fade active in">
                <p>一次部署，是一个任务</p>
                <div class="panel">
                    <div class="panel-body">
                        <button data-target="#deploy-install-addtask-modal" data-toggle="modal"
                                class="btn btn-primary btn-lg">
                            创建任务
                        </button>
                        <!--===================任务列表================================-->
                        <div class="panel-body">
                            <div class="table-responsive">
                                {% for i in alltasks %}
                                <table class="table table-bordered deploy-install-tasktable">
                                    <thead>
                                    <tr>
                                        <th>任务</th>
                                        <th>主机列表</th>
                                        <th>安装列表</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for ts in i.taskschedu_set.all %}
                                    <tr taskid="{{ i.id }}">
                                        <td> <h4>{{ ts.taskname.taskName }}</h4> <p><button class="btn btn-warning">执行安装</button></p></td>
                                        <td>{{ ts.hostiport }}</td>
                                        <td>{{ ts.elementList }}</td>
                                        <td>
                                            <button class="btn btn-danger">删除</button>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                                {% endfor %}
                            </div>
                        </div>
                        <!--===================================================-->
                        <!-- End 任务列表Table -->
                    </div>
                </div>
            </div>
            <div id="deploy-install-tab-2" class="tab-pane fade">
                <p>每个任务中包含每个主机所有安装项目</p>
                <div class="panel">
                    <div class="panel-body">
                        <button data-target="#deploy-install-layout-modal" data-toggle="modal"
                                class="btn btn-primary btn-lg">
                            任务编排
                        </button>

                    </div>
                </div>
            </div>
            <div id="deploy-install-tab-3" class="tab-pane fade">
                <p>所有可安装的组件</p>
                <div class="panel">
                    <div class="panel-body">
                        <button data-target="#deploy-install-addelement-modal" data-toggle="modal"
                                class="btn btn-primary btn-lg">
                            添加组件
                        </button>
                        <!--===================组件列表================================-->
                        <div class="panel-body">
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                    <tr>
                                        <th>组件</th>
                                        <th>组件名</th>
                                        <th>描述</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for ae in allelements %}
                                    <tr groupid="{{ ae.id }}">
                                        <td>{{ ae.elementHumanName }}</td>
                                        <td>{{ ae.elementName }}</td>
                                        <td>{{ ae.elementDesc }}</td>
                                        <td>
                                            <button class="btn btn-danger">删除</button>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!--===================================================-->
                        <!-- End 组件列表Table -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--===================================================-->
    <!--End Default Tabs (Left Aligned)-->

</div>

<!-- 添加任务 Modal-->
<!--===================================================-->
<div class="modal fade" id="deploy-install-addtask-modal" role="dialog" tabindex="-1"
     aria-labelledby="deploy-install-layout-modal"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <!--Modal header-->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><i class="pci-cross pci-circle"></i></button>
                <h4 class="modal-title">创建任务</h4>
            </div>

            <!--Modal body-->
            <div class="modal-body">
                <!-- BASIC FORM ELEMENTS -->
                <!--===================================================-->
                <form class="panel-body form-horizontal form-padding">
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="deploy-install-task-name">任务名称</label>
                        <div class="col-md-9">
                            <input type="text" id="deploy-install-task-name" class="form-control" placeholder="Text">
                            <small class="help-block">创建部署的任务名称</small>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="deploy-install-task-desc">备注</label>
                        <div class="col-md-9">
                            <textarea id="deploy-install-task-desc" rows="9" class="form-control"
                                      placeholder=""></textarea>
                        </div>
                    </div>
                </form>
                <!--===================================================-->
                <!-- END BASIC FORM ELEMENTS -->
            </div>

            <!--Modal footer-->
            <div class="modal-footer" id="deploy-install-addtask-savebtn">
                <button data-dismiss="modal" class="btn btn-default" type="button">取消</button>
                <button class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<!--===================================================-->
<!--End 添加任务 Modal-->


<!--任务编排 Modal-->
<!--===================================================-->
<div class="modal fade" id="deploy-install-layout-modal" role="dialog" tabindex="-1"
     aria-labelledby="deploy-install-layout-modal"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <!--Modal header-->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><i class="pci-cross pci-circle"></i></button>
                <h4 class="modal-title">任务编排</h4>
            </div>

            <!--Modal body-->
            <div class="modal-body">
                <!-- BASIC FORM ELEMENTS -->
                <!--===================================================-->
                <form class="panel-body form-horizontal form-padding">
                    <div class="form-group pad-ver">
                        <label class="col-md-3 control-label">组件列表</label>
                        <div class="col-md-9" id="deploy-install-layout-checklist">
                            {% for e in allelements %}
                            <!-- Checkboxes -->
                            <div class="checkbox">
                                <input id="deploy-install-checkbox-{{ e.id }}" class="magic-checkbox" type="checkbox"
                                       value="{{ e.elementName }}"
                                       name="deploy-install-elelist">
                                <label for="deploy-install-checkbox-{{ e.id }}">{{ e.elementHumanName }}</label>
                            </div>
                            {% endfor %}
                        </div>
                    </div>

                    <!--选择所属任务-->
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="deploy-install-task">所属任务</label>
                        <div class="col-md-9">
                            <select id="deploy-install-task" class="form-control">
                                {% for at in alltasks %}
                                <option value="{{ at.id }}">{{ at.taskName }}</option>
                                {% endfor %}
                            </select>
                            <p>请先创建任务</p>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-3 control-label">选择服务器</label>
                        <div class="col-md-9">
                            <!-- multiple select boxs -->
                            <!--===================================================-->
                            <select class="deploy-install-host-multiple deploy-install-host-states form-control"
                                    multiple="multiple"></select>
                            <!--===================================================-->
                            <p>注:请选择想要安装部署的主机或主机组</p><br>
                        </div>
                    </div>

                </form>
                <!--===================================================-->
                <!-- END BASIC FORM ELEMENTS -->
                <div id="deploy-install-addlayout-addrow">
                    <button class="btn btn-purple"><i class="demo-pli-plus"></i> Add Row
                    </button>
                </div>
                <p>任务列表预览</p>
                <table class="table table-bordered table-hover toggle-circle" data-page-size="7">

                    <tbody id="deploy-install-addlayout-previewtable">
                    </tbody>

                </table>
            </div>

            <!--Modal footer-->
            <div class="modal-footer" id="deploy-install-layout-savebtn">
                <button data-dismiss="modal" class="btn btn-default" type="button">取消</button>
                <button class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>
<!--===================================================-->
<!--End 任务编排 Modal-->


<!--添加组件 Modal-->
<!--===================================================-->
<div class="modal fade" id="deploy-install-addelement-modal" role="dialog" tabindex="-1"
     aria-labelledby="deploy-install-addelement-modal"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <!--Modal header-->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><i class="pci-cross pci-circle"></i></button>
                <h4 class="modal-title">添加组件</h4>
            </div>

            <!--Modal body-->
            <div class="modal-body">
                <!-- BASIC FORM ELEMENTS -->
                <!--===================================================-->
                <form class="panel-body form-horizontal form-padding">
                    <!--Text Input-->
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="deploy-install-addelement-humanname">组件名称</label>
                        <div class="col-md-9">
                            <input type="text" id="deploy-install-addelement-humanname" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="deploy-install-addelement-name">组件名</label>
                        <div class="col-md-9">
                            <input type="text" id="deploy-install-addelement-name" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="deploy-install-addelement-desc">说明</label>
                        <div class="col-md-9">
                            <input type="text" id="deploy-install-addelement-desc" class="form-control">
                        </div>
                    </div>

                </form>
                <!--===================================================-->
                <!-- END BASIC FORM ELEMENTS -->
            </div>

            <!--Modal footer-->
            <div class="modal-footer" id="deploy-install-addelement-savebtn">
                <button data-dismiss="modal" class="btn btn-default" type="button">取消</button>
                <button class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<!--===================================================-->
<!--End 添加组件 Modal-->


<!--任务编排主机，主机组选择-->
<select class="deploy-project-user-source" style="display: none;">
    <optgroup label="主机">
        {% for h in allhosts %}
        <option value="h{{ h.id }}">{{ h.hostName }}</option>
        {% endfor %}
    </optgroup>
    <optgroup label="主机组">
        {% for g in allhostgroups %}
        <option value="g{{ g.id }}">{{ g.hostGroupName }}</option>
        {% endfor %}
    </optgroup>
</select>
<!--任务编排主机，主机组选择-->

{% endblock %}


{% block js %}

<script type="text/javascript" src="/static/js/select2.full.js"></script>
<script type="text/javascript" src="/static/js/prettify.min.js"></script>
<script src="/static/js/jquery.cookie.js"></script>
<script type="text/javascript">
    var $states = $(".js-source-states");
    var statesOptions = $states.html();
    $states.remove();
    $(".js-states").append(statesOptions);
    $.fn.select2.amd.require(
            ["select2/core", "select2/utils", "select2/compat/matcher"],
            function () {
                var $basicMultiple = $(".js-example-basic-multiple");
                $basicMultiple.select2()
            });
</script>
<script type="text/javascript">
    var $states = $(".deploy-project-user-source");
    var statesOptions = $states.html();
    $states.remove();
    $(".deploy-install-host-states").append(statesOptions);
    $.fn.select2.amd.require(
            ["select2/core", "select2/utils", "select2/compat/matcher"],
            function () {
                var $basicMultiple = $(".deploy-install-host-multiple");
                $basicMultiple.select2()
            });
</script>
<script src="/static/js/deploy-install.js"></script>
{% endblock %}
